.legend-layer {
  border-color: #4a80a3;

  .el-select-dropdown__empty {
    background-color: #4a80a3;
    color: white;
  }

  .el-select-dropdown__list {
    background-color: #4a80a3;

    .el-select-dropdown__item {
      color: white;
      background-color: #4a80a3;

      &.selected {
        color: white;
      }

      &.hover {
        background-color: #28516c;
      }
    }
  }

  .popper__arrow {
    border-top-color: #4a80a3 !important;
    border-bottom-color: #4a80a3 !important;

    &::after {
      border-top-color: #4a80a3 !important;
      border-bottom-color: #4a80a3 !important;
    }
  }
}

.show-type {
  .el-select-dropdown {
    border-color: #4a80a3;

    .el-select-dropdown__empty {
      background-color: #4a80a3;
      color: white;
    }

    .el-select-dropdown__list {
      background-color: #4a80a3;

      .el-select-dropdown__item {
        color: white;
        background-color: #4a80a3;

        &.selected {
          color: white;
        }

        &.hover {
          background-color: #28516c;
        }
      }
    }

    .popper__arrow {
      border-bottom-color: #4a80a3;

      &::after {
        border-bottom-color: #4a80a3;
      }
    }
  }
  .el-popper[x-placement^='top'] .popper__arrow::after {
    border-top-color: #4a80a3;
  }
}

.el-popover.el-popper.popper-main {
  background: rgba(25, 47, 61, 1);
  left: none !important;
  right: 60px !important;
  border: 1px solid rgba($color: #ebeef5, $alpha: 0.2);
  // border: none;
}

@mixin display-flex {
  display: flex;
}

.flex-x {
  @include display-flex;

  flex-direction: row;
}

.flex-y {
  @include display-flex;

  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.main-center {
  justify-content: center;
}

.main-around {
  justify-content: space-around;
}

.main-between {
  justify-content: space-between;
}

.cross-start {
  align-items: flex-start;
}

.cross-center {
  align-items: center;
}
